<!--
 * @Author: atdow
 * @Date: 2021-08-02 10:15:34
 * @LastEditors: null
 * @LastEditTime: 2021-08-03 10:44:12
 * @Description: file description
-->
<template>
    <div class="bg-white pdr pdl pt20">
        <div class="model-cart" v-if="moduleType === 'assetsOverview'">
            <div class="model-small model-bg1 float-left">
                <div class="tit">数据字典总数</div>
                <div class="tit-tip">
                    <span class="tit-tip-tit">累计：</span>
                    <span class="tit-tip-num">{{ dict.totalUpdate || 0 }}</span>
                </div>
                <div class="tit-tip">
                    <span class="tit-tip-tit">昨日新增:</span>
                    <span class="tit-tip-num">{{ dict.lastUpdate || 0 }}</span>
                </div>
            </div>
            <div class="model-small model-bg2 float-left">
                <div class="tit">编码规则总数</div>
                <div class="tit-tip">
                    <span class="tit-tip-tit">累计：</span>
                    <span class="tit-tip-num">{{ dir.totalUpdate || 0 }}</span>
                </div>
                <div class="tit-tip">
                    <span class="tit-tip-tit">昨日新增:</span>
                    <span class="tit-tip-num">{{ dir.lastUpdate || 0 }}</span>
                </div>
            </div>
            <div class="model-small model-bg3 float-left">
                <div class="tit">行业概念总数</div>
                <div class="tit-tip">
                    <span class="tit-tip-tit">累计：</span>
                    <span class="tit-tip-num">{{
                        business.totalUpdate || 0
                    }}</span>
                </div>
                <div class="tit-tip">
                    <span class="tit-tip-tit">昨日新增:</span>
                    <span class="tit-tip-num">{{
                        business.lastUpdate || 0
                    }}</span>
                </div>
            </div>
        </div>
        <div class="tab-position-parent" v-if="moduleType === 'assetsOverview'">
            <el-button-group>
                <el-button
                    label="basis"
                    :class="[
                        'btn-notAction',
                        tabPosition == 'basis' ? 'btn-action' : ''
                    ]"
                    @click="handleClick('basis')"
                    >数据字典</el-button
                >
                <el-button
                    label="associat"
                    :class="[
                        'btn-notAction',
                        tabPosition == 'associat' ? 'btn-action' : ''
                    ]"
                    @click="handleClick('associat')"
                    >编码规则</el-button
                >
                <el-button
                    label="change"
                    :class="[
                        'btn-notAction',
                        tabPosition == 'change' ? 'btn-action' : ''
                    ]"
                    @click="handleClick('change')"
                    >行业概念</el-button
                >
            </el-button-group>
            <div id="myChart" style="height:275px"></div>
        </div>
        <el-form
            label-width="120px"
            class="operation"
            v-if="moduleType === 'operationHistory'"
        >
            <el-form-item label="最近更新时间：" class="float-left">
                <el-date-picker
                    v-model="ruleForm.datetime"
                    type="datetimerange"
                    :picker-options="pickerOptions"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    @change="changeDatetimePicker"
                    align="left"
                    clearable
                >
                </el-date-picker>
            </el-form-item>
            <el-form-item class="search-btn float-left">
                <el-button
                    type="primary"
                    icon="el-icon-search"
                    size="mini"
                    class="search-btn-item"
                    @click="searchBtn"
                    >查询</el-button
                >
                <el-button
                    type="primary"
                    icon="el-icon-refresh"
                    class="search-btn-item"
                    size="mini"
                    @click="reset()"
                    >刷新</el-button
                >
            </el-form-item>
        </el-form>
        <div class="table-list">
            <el-table
                v-loading="loading"
                :data="selectList"
                border
                :max-height="tableMaxHeight"
                ref="multipleTable"
            >
                <el-table-column
                    label="数据标准类型"
                    align="center"
                    key="typeName"
                    prop="typeName"
                    width="207"
                    :show-overflow-tooltip="true"
                >
                </el-table-column>
                <el-table-column
                    label="数据标准名称"
                    align="center"
                    key="name"
                    prop="name"
                    width="298"
                    :show-overflow-tooltip="true"
                >
                </el-table-column>
                <el-table-column
                    label="所属目录"
                    align="changTime"
                    key="dirPath"
                    prop="dirPath"
                >
                    <template slot-scope="scope">
                        <div>
                            <span>{{ scope.row.dirPath }}</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                    label="变更类型"
                    align="changTime"
                    key="operationRemark"
                    prop="operationRemark"
                    width="199"
                >
                </el-table-column>
                <el-table-column
                    label="最近更新时间"
                    align="center"
                    key="createTime"
                    prop="createTime"
                    width="160"
                >
                </el-table-column>
            </el-table>
            <pagination
                v-show="total > 0"
                :total="total"
                small
                :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize"
                @pagination="getDataLogList"
            />
        </div>
    </div>
</template>
<script>
import echarts from "echarts";
import { setData } from "@/utils/zkComm";
import {
    dataLogList,
    dataLogStatistic
} from "@/api/dataManagement/system/data";
export default {
    name: "",
    props: {
        moduleType: {
            type: String,
            default: "assetsOverview",
            validator: function(value) {
                return (
                    ["assetsOverview", "operationHistory"].indexOf(value) !== -1
                );
            }
        }
        // tableMaxHeight: {
        //     type: String,
        //     default: "221px"
        //     // default: "261px"
        // }
    },
    data() {
        return {
            tabPosition: "basis",
            EchartsList: [],
            loading: false,
            selectList: [],
            chartList: "",
            // 字典
            dict: "",
            // 行业概念
            business: "",
            // 编码
            dir: "",
            total: 0,
            queryParams: {
                pageNum: 1,
                pageSize: 20
            },
            ruleForm: {
                datetime: [],
                startTime: "",
                endTime: ""
            },
            pickerOptions: {},

            tableMaxHeight:
                this.moduleType === "assetsOverview" ? "221px" : "661px"
        };
    },
    created() {
        this.getDataLogList();
        if (this.moduleType === "assetsOverview") {
            this.getDataLogStatistic();
        }
    },
    mounted() {},
    methods: {
        changeDatetimePicker(data) {
            let startTime = "",
                endTime = "";
            if (data && data.length) {
                startTime = this.parseTime(
                    new Date(data[0]),
                    "{y}-{m}-{d} {h}:{i}:{s}"
                );
                endTime = this.parseTime(
                    new Date(data[1]),
                    "{y}-{m}-{d} {h}:{i}:{s}"
                );
            }
            this.ruleForm.startTime = startTime;
            this.ruleForm.endTime = endTime;
        },
        reset() {
            this.ruleForm = {
                datetime: [],
                startTime: "",
                endTime: ""
            };
            this.queryParams.pageNum = 1;
            this.searchBtn();
        },
        searchBtn() {
            this.getDataLogList();
        },
        // dataLogStatistic
        // 获取标准概览总数
        getDataLogStatistic() {
            dataLogStatistic().then(res => {
                if (res.code == 200) {
                    this.dict = res.data.dict;
                    this.business = res.data.business;
                    this.dir = res.data.dir;
                    this.setDatas(res.data.list);
                    if (this.tabPosition == "basis") {
                        this.variatioHandle(
                            this.chartList.dataTime,
                            this.chartList.size0,
                            "数据字典",
                            "#409EFF"
                        );
                    } else if (this.tabPosition == "associat") {
                        this.variatioHandle(
                            this.chartList.dataTime,
                            this.chartList.size1,
                            "编码规则",
                            "#67C23A"
                        );
                    } else {
                        this.variatioHandle(
                            this.chartList.dataTime,
                            this.chartList.size2,
                            "行业概念",
                            "#E6A23C"
                        );
                    }
                }
            });
        },
        getDataLogList() {
            // console.log("queryParams:", this.queryParams);
            // console.log("ruleForm:", this.ruleForm);
            dataLogList({ ...this.queryParams, ...this.ruleForm }).then(res => {
                this.selectList = res.rows;
                this.total = res.total;
                this.$refs.multipleTable.bodyWrapper.scrollTop = 0;
            });
        },
        // 点击tabs
        handleClick(tab) {
            this.tabPosition = tab;
            this.getDataLogStatistic();
        },
        // 汇总Echart 的数据
        setDatas(list) {
            var size0 = [],
                size1 = [],
                size2 = [],
                size3 = [],
                dataTime = [];
            if (!list) return false;
            function setCharDatas(data) {
                if (!data) return;
                for (var i = 0; i < data.length; i++) {
                    if (Array.isArray(data[i].list)) {
                        dataTime.push(data[i].date);
                        setCharDatas(data[i].list);
                    } else {
                        if (data[i].logType == 0) {
                            size0.push(data[i].size);
                        } else if (data[i].logType == 1) {
                            size1.push(data[i].size);
                        } else if (data[i].logType == 2) {
                            size2.push(data[i].size);
                        } else {
                            size3.push(data[i].size);
                        }
                    }
                }
                return { size0, size1, size2, size3, dataTime };
            }
            this.chartList = setCharDatas(list);
        },
        //变化量
        variatioHandle(dataTime, dataList, tit, color) {
            // setEchart.str
            var data = {
                legend: {
                    data: [tit],
                    bottom: "10"
                },
                xAxis: {
                    data: dataTime
                },
                grid: {
                    left: "0%",
                    right: "0%",
                    bottom: "11%",
                    top: "6%",
                    containLabel: true
                },
                series: [
                    {
                        name: tit,
                        type: "line",
                        itemStyle: {
                            color: color
                        },
                        barMaxWidth: "50",
                        // data: setData("totalAccount","",this.EchartsList,this).num ||[120, 132, 101, 134, 90, 230, 210]
                        data: dataList
                    }
                ]
            };
            this.initechart(data);
        },
        initechart(obj) {
            var chartDom = document.getElementById("myChart");
            var myChart = echarts.init(chartDom);
            var option = {
                legend: obj.legend ? obj.legend : null,
                grid: obj.grid ? obj.grid : null,
                xAxis: {
                    type: "category",
                    data: obj.xAxis.data || [
                        "Mon",
                        "Tue",
                        "Wed",
                        "Thu",
                        "Fri",
                        "Sat",
                        "Sun"
                    ]
                },
                yAxis: {
                    type: "value"
                },
                series: obj.series
            };
            myChart.clear();
            myChart.setOption(option);
            window.onresize = myChart.resize;
        }
    }
};
</script>
<style lang="scss" scoped>
$one: #2a8ef5;
$two: #2ccbed;
$three: #8593f2;

.model-bg1 {
    background: $one;
}
.model-bg2 {
    background: $two;
}
.model-bg3 {
    background: $three;
}

.tit {
    border-bottom: 1px solid #ffffff;
    padding: 10px 0 9px 0;
}
.tit-tip {
    display: flex;
    align-items: center;
    .tit-tip-tit {
        font-size: 16px;
    }
    .tit-tip-num {
        font-size: 22px;
        font-weight: bold;
    }
}
.model-cart {
    overflow: hidden;
    .model-small {
        width: 240px;
        height: 110px;
        color: #fff;
        padding: 0 20px;
        border-radius: 4px;
        margin-right: 30px;
    }
}
.tab-position-parent {
    padding-top: 15px;
    .btn-notAction {
        border-radius: 0px !important;
    }
    .btn-action {
        background: #1183f8;
        color: #ffffff;
    }
}
.table-list {
    padding: 20px 0;
    min-height: 272px;
}
</style>
